import { getcomputer } from "../../tools/ajax"
import { useState, useEffect } from "react"
import React from 'react';
import { Radio } from 'antd';
import "./computers.css"
import type { RadioChangeEvent } from 'antd';
function Fencomputer() {
    // 标题列表
    const [titlelist, setTitlelist] = useState([])
    // 属性列表
    const [list, setList] = useState([])
    const [good, setGood] = useState([])
    useEffect(() => {
        getcomputer().then(res => {
            // x86 
            setTitlelist(Object.keys(res.data))
            //ARM 的 5G
            const arr = (Object.values(res.data));
            setList(Object.keys(arr[0]))
            const array = res.data["X86"]
            setGood(array)
        })
    }, [])
    //存储当前选中x86值
    const [value, setValue] = useState("X86");
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    //存储当前选中g值
    const [value1, setValue1] = useState("5G");
    const onChange1 = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue1(e.target.value);
    };
    // console.log(list[value]?.pic1);
    const [value2, setValue2] = useState("虚机");
    const onChange2 = (e: RadioChangeEvent) => {
        setValue2(e.target.value);
    };
    console.log(good);
    console.log(good[value1]);
    return (
        <div className="tuncom_box">
            <div className="tuncom_tu">服务器</div>
            <div>
                {
                    titlelist.map((item, index) => {
                        return <span key={item}>
                            <Radio.Group onChange={onChange} size="large" value={value}>
                                <Radio value={item}>{item}</Radio>
                            </Radio.Group>
                        </span>
                    })
                }
            </div>
            <div className="tuncom_tu">吞吐量</div>
            <div>
                {
                    list.map((item, index) => {
                        return <span key={item}>
                            <Radio.Group onChange={onChange1} size="large" value={value1}>
                                <Radio value={item}>{item}</Radio>
                            </Radio.Group>
                        </span>
                    })
                }
            </div>
            <div className="tuncom_tu">架构</div>
            <Radio.Group size="large" value={value2} onChange={onChange2} >
                <Radio value={"虚机"}>虚机</Radio>
                <Radio value={"容器"}>容器</Radio>
                <Radio value={"虚机+容器"}>虚机+容器</Radio>
            </Radio.Group>

            <div>
                <div className="price">
                    <span>软件费：{good[value1]?.[value2]?.p1}元</span>
                    <span>硬件费：{good[value1]?.[value2]?.p2}元</span>
                    <span>总价：{good[value1]?.[value2]?.total}元</span>
                </div>
                <div className="my_peizhi">
                    <div>
                        <div>软件配置图</div>
                        <img src={'http://127.0.0.1:5000/' + good[value1]?.[value2]?.pic1} alt="" />
                    </div>
                    <div className="my_peizhi_l">
                        <div>硬件配置图</div>
                        <img src={'http://127.0.0.1:5000/' + good[value1]?.[value2]?.pic2} alt="" />
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Fencomputer
